/*

@description: 寄件服务style

@author: 赖赖

@update: 2021年9月8日15:56:25

*/

// 寄件服务
main {
    padding-top: 20px;
    box-sizing: border-box;
    background: url("https://www.jdl.cn/resource/images/bnet/b-background.jpg");
    background-size: cover;

    .btd {
        //标题顶
        width: 950px;
        height: 45px;
        margin: auto;
        margin-bottom: 12px;
        background: rgb(250, 250, 250);

        h4 {
            font-size: 12px;
            line-height: 45px;
            padding-left: 20px;
        }
    }

    // 表单
    .bd {
        width: 950px;
        background: rgb(250, 250, 250);
        margin: auto;

        .bt {
            // 标题
            padding-top: 16px;
            display: flex;
            justify-content: center;
            margin-bottom: 38px;

            h5 {
                width: 115px;
                height: 35px;
                background: rgb(220, 76, 63);
                color: rgb(250, 250, 250);
                line-height: 35px;
                text-align: center;
            }
        }

        form {
            height: 1000px;
            display: flex;
            flex-direction: column;

            // 填写信息
            .xx {
                width: 950px;
                display: flex;

                .txmk {
                    // 寄件人
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-right: 1px dashed rgb(204, 204, 204);
                    box-sizing: border-box;
                    padding-left: 44px;
                    padding-bottom: 20px;

                    h5 {
                        // 标题
                        text-align: center;
                        margin-bottom: 20px;
                    }

                    .jishou {
                        // 表单
                        position: relative;

                        label {
                            // 输入框说明
                            width: 200px;
                            font-size: 14px;
                            color: rgb(104, 104, 104);

                            span {
                                // 星号字体
                                color: rgb(224, 46, 52);
                            }

                            input {
                                // 输入框
                                width: 292px;
                                height: 32px;
                                line-height: 32px;
                                padding-left: 6px;
                                box-sizing: border-box;
                                border-radius: 5px;
                                border: 1px solid rgb(232, 232, 232);
                                margin-bottom: 26px;
                                margin-right: 40px;
                            }

                            input:focus {
                                // 点击之后
                                box-shadow: 0 2px 2px 2px rgb(216, 216, 216);
                            }
                        }

                        .jj {
                            // 布局
                            float: left;
                        }

                        textarea {
                            // 地址输入框
                            float: right;
                            transform: translate(-48px, -18px);
                            width: 292px;
                            line-height: 32px;
                            padding-left: 6px;
                            box-sizing: border-box;
                            border-radius: 5px;
                            border: 1px solid rgb(232, 232, 232);
                        }
                    }
                }

                .sj {
                    // 取消右边框
                    border-right: none;
                }
            }

            //寄件方式
            .fs {
                position: relative;
                margin-top: 25px;
                border-top: 1px solid rgb(235, 235, 235);
                border-bottom: 1px solid rgb(235, 235, 235);
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 20px;

                h5 {
                    font-size: 16px;
                    margin-bottom: 12px;
                }

                .jjfs {
                    // 寄件方式
                    width: 330px;
                    margin-bottom: 14px;

                    .qj {
                        // 上门取件
                        width: 200px;
                        text-align: center;
                        color: rgb(51, 51, 51);
                    }
                }

                label {
                    font-size: 16px;

                    input {
                        // 输入框
                        width: 226px;
                        height: 32px;
                        line-height: 32px;
                        padding-left: 6px;
                        box-sizing: border-box;
                        border-radius: 5px;
                        border: 1px solid rgb(232, 232, 232);
                        margin-right: 26px;
                    }

                    // .sj {
                    //     transform: translateY(-9px);
                    // }

                    input:focus {
                        // 点击之后
                        box-shadow: 0 2px 2px 2px rgb(216, 216, 216);
                    }
                }

            }

            .yzm {
                // 验证码
                margin-top: 65px;
                margin-left: 330px;

                #vcode {
                    height: 25px;
                    width: 150px;
                    font-size: 16px;
                    border: none;
                    color: rgb(51, 51, 51);
                    text-indent: 8px;
                    background-color: rgba(43, 40, 39, 0);
                    border: 1px solid rgb(226, 224, 220);
                    border-radius: 5px;
                    transform: translateY(-4px);
                }

                .sp {
                    cursor: pointer;
                    margin-left: 5px;
                    color: rgb(255, 255, 255);
                    font-size: 20px;
                    border: 1px solid blanchedalmond;
                    //   background-color: rgba(43, 40, 39,.5);
                    background-image: url('../../../other/Egg_img/VerificationCodeBackground.png');
                    background-size: 100% 100%;
                    font-weight: bold;
                    font-style: italic;
                    padding: 0 15px;
                    border-radius: 5px;
                }
            }

            // 提交
            .tj {
                height: 500px;
                padding: 20px;
                padding-left: 132px;
                text-align: center;

                input {
                    transform: translateY(1.5px);
                }

                input:hover {
                    // 悬浮变小手
                    cursor: pointer;
                    color: #DC4C3F;
                }

                label {
                    color: rgb(102, 102, 102);
                    font-size: 12px;
                }

                label:hover {
                    cursor: pointer;
                    color: rgb(255, 0, 8);
                }

                .jz {
                    width: 120px;
                    height: 32px;
                    background: rgb(217, 217, 217);
                    border: none;
                    color: rgb(250, 250, 250);
                    border-radius: 6px;
                    transform: translate(-148px, 46px);
                }

                .jz:hover{//信息未完成 禁止提交标志
                    cursor:not-allowed;
                }

                .tj_an {
                    // 提交按钮
                    width: 120px;
                    height: 32px;
                    background: rgb(217, 217, 217);
                    border: none;
                    color: rgb(250, 250, 250);
                    border-radius: 6px;
                    transform: translate(-148px, 46px);
                    background: #dc4c3f;
                }

            }

            .ts {
                // input输入框提示
                opacity: 0;
                transform: translate(98px, -25px);
                color: rgb(214, 21, 27);
            }

            .dz_ts {
                // 地址提示框
                opacity: 0;
                transform: translate(96px, 308px);
                color: rgb(214, 21, 27);
                width: 500px;
                position: absolute;
                top: 180px;
            }

            .set_out {
                // 时间提示
                opacity: 0;
                color: rgb(214, 21, 27);
                transform: translate(-18px, 0);
                margin-bottom: 15px;
            }

            .yzm_ts {
                // 验证吗提示
                height: 15px;
                color: rgb(214, 21, 27);
                transform: translate(4px, 0);
            }
        }
    }

}

// 条款模态框
.mtk {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 2132px;
    height: 1080px;
    background: rgba(0, 0, 0, 0.65);

    // 条款
    .tk {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -70%);
        width: 800px;
        height: 700px;
        background: rgb(250, 250, 250);
        border-radius: 6px;

        h1 {
            text-align: center;
            font-size: 16px;
            color: #666666;
            background-color: #F8F8F8;
            border-radius: 4px 4px 0 0;
            line-height: 2;
        }

        p {
            padding: 32px 24px;
            white-space: pre-wrap;
            height: 520px;
            overflow-y: auto;
            overflow-wrap: break-word;
        }

        .gb {
            float: right;
            background: #FFFFFF;
            border: 1px solid #D9D9D9;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.65);
            vertical-align: middle;
            width: 120px;
            height: 50px;
            font-size: 14px;
            font-weight: 400;
            margin: 20px 20px;
            border-radius: 6px;
        }
    }
}